<template>
    <!-- Main -->
    <div id="main">
        <div class="inner">
            <div class="flex-box">
                <a class="itm" :href="nav.href" v-for="nav,index in navs">
                     <mu-card>
                        <mu-card-media :style="'background-image:url('+nav.img+')'">
                            <div ></div>
                        </mu-card-media>
                        <mu-card-title :title="nav.title" />
                        <mu-card-text>
                            {{nav.content}}
                        </mu-card-text>
                    </mu-card>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import API from '../api/api'
export default {
    name: 'nav_detail',
    data: function(){
        return{
            tagId: this.$route.params.tagId,
            navs: null
        }
    },
    mounted: function(){
        API.getNavByTagId(this.tagId)
            .then(function(res){
                var arr =[];
                res.forEach(function(nav){
                    var obj = {
                        title: nav.attributes.nav_title,
                        content: nav.attributes.nav_content,
                        img: nav.attributes.nav_title_img,
                        href: nav.attributes.nav_link
                    }
                    arr.push(obj)
                })
                this.navs = arr;
            }.bind(this))
    }
}
</script>

<style scoped>
.flex-box{
    display: flex;
    flex-wrap: wrap;
}
.flex-box .itm{
    display: block;
    flex: 0 1 20%;
    padding: 10px;
}
.mu-card-media{
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>